<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选与全不选</title>
</head>
<body>
<form>
    <input type="checkbox" value="0" id="hobby"> 全选<br>
    <input type="checkbox" value="写字" name="hobby">写字
    <input type="checkbox" value="画画" name="hobby">画画
    <input type="checkbox" value="打游戏" name="hobby">打游戏
    <input type="checkbox" value="LOL" name="hobby">LOL
</form>

</body>
<script>
let name = document.getElementsByName("hobby");
let all = document.getElementById("hobby");

//all.checked返回的是布尔值，即选中未选中
//添加单击时间
all.onclick= allCheck;
function allCheck(){
    //循环name的每个元素
    for (let item of name) {
        //令每一项的选中属性与全选框保持一致
        item.checked = all.checked;
    }
}

</script>
</html>